<template>
  <div>
    <div>
      <label
        >姓名:<el-input
          v-model="info.name"
          placeholder="请输入用户名"
        ></el-input>
      </label>
    </div>
    <div>
      <label
        >密码:<el-input
          v-model="info.password"
          placeholder="请输入密码"
        ></el-input>
      </label>
    </div>
    <div>
      <label
        >邮箱:<el-input
          v-model="info.email"
          placeholder="请输入邮箱"
        ></el-input>
      </label>
    </div>
    <el-button @click="save" style="width: 100px">保存</el-button>
    <el-button @click="reset" style="width: 100px">重置</el-button>
    <el-table :data="infoArr" border style="width: 100%">
      <el-table-column
        type="index"
        label="编号"
        width="180"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="password"
        label="密码"
        width="180"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="email"
        label="邮箱"
        width="180"
        align="center"
      ></el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      info: {
        name: "",
        password: "",
        email: "",
      },
      infoArr: [
        {
          name: "jack",
          password: "1123456",
          email: "123@156.com",
          id: 1,
        },
        {
          name: "rose",
          password: "789456",
          email: "789456@123.com",
          id: 2,
        },
        {
          name: "tom",
          password: "456321",
          email: "456321@123.com",
          id: 3,
        },
      ],
    };
  },
  methods: {
    //删除的操作
    handleDelete(index) {
      this.infoArr.splice(index, 1);
    },
    save() {
      if (!this.info.name == "") {
        //让i等于数组的最后一项的id
        let i = this.infoArr[this.infoArr.length - 1].id;
        //i自加
        i++;
        //让registerInfo的最后一项的id等于i
        this.info.id = i;
        //数组的浅拷贝
        this.infoArr.push({ ...this.info });
      } else {
        //如果该用户没有输入姓名的
        alert("请输入您的姓名");
      }
    },
    reset() {
      this.info = {
        name: "",
        password: "",
        email: "",
      };
    },
  },
};
</script>

<style lang="less" scoped>
</style>